<template>
    <div class="interface">
        <div class="box" >
            <div class="c"><span class="d">人才管理系统</span> </div>
            <input type="submit" plain @click="operate" value="管理模块" class="b" />
            <input type="submit" plain @click="query" value="查阅模块" class="a" />
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        operate(){
            this.$router.push('/oplogin');
        },
        query(){
            this.$router.push('/csLogin');
        },
        getRain(){
            //创建rain元素
            var rain=document.createElement("div");
            //初始化rain属性
            rain.style.position="fixed";
            rain.style.height="20px";
            rain.style.width="2px";
            rain.style.backgroundImage="url(/img/rain.4fdd0a6c.jpg)";      //有图片赋值图片路径，或者赋值16进制的颜色代码
            rain.style.backgroundColor="#000000";
            rain.style.filter="blur(1px)";
            rain.style.top="0px";
            rain.style.left=Math.random()*1920+"px";                    //随机化位置
            rain.style.opacity=parseInt(Math.random()*10)/10+"";        //随机化透明度
            //向body里添加子节点rain
            document.body.appendChild(rain);
            var timer=setInterval(function()
            {
                var height=parseInt(rain.style.top);
                var k=1;
                k++;

                rain.style.top=height+5*Math.pow(k,2)+"px";             //模拟重力加速度
                //当雨滴到达底部后消失并清除子节点rain
                if(rain.style.top>="900px")
                {
                    clearInterval(timer);
                    rain.parentNode.removeChild(rain);
                }
            },50)                        //每隔4毫秒雨滴下落一次
        }
    },
    mounted() {
        this.timer=setInterval(this.getRain,50);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    }
}
</script>

<style lang="less" scoped>
.interface {
 margin: 0;
 padding: 0;
 height: 100%;
 border-radius: 20px;
 background-image: url(../assets/1.jpg);
 background-repeat: no-repeat;
 background-size: 100%;
 background-position: 0px -50px;
}
.box {
 width: 450px;
 height: 500px;
 padding: 40px;
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 40px;
 transform: translate(-50%,-50%);
 background-color: #00000068;
 text-align: left;
 border-style: ridge;
}
.box input[type = "submit"] {
 border: 0;
 font-size: 25px;
 background: none;
 display: block;
 margin: 20px auto;
 text-align: center;
 border: 2px solid #FFFFFF;
 padding: 14px 40px;
 outline: none;
 color: #ffffff;
 border-radius: 24px;
 transition: 0.25s;
 cursor: pointer;
}
.box input[type = "submit"]:hover {
 background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
 font-size: x-large;
}
.a {
  position: absolute;
  left: 50%;
  bottom: 20%;
  -webkit-transform: translate(-50%,0%);
}
.b {
  position: absolute;
  left: 50%;
  bottom: 40%;
  -webkit-transform: translate(-50%,0%);
}
.c {
    text-align: center;
}
.d {
font-size: 60px;
font-weight: 400;
color: #faf9f9;
 text-transform: uppercase;
}
</style>